<template>
  <el-row :class="'inter-plan'" v-show="isShowFillInp">
    <div class="title-box">面试安排填写</div>
    <el-form  :inline="true" :model="defaultInpData" ref="defaultInpData" :rules="checkFrom" class="form-box">
      <el-form-item label="面试官：" prop="interviewName">
        <el-input :disabled="true" v-model="defaultInpData.interviewName" :maxlength="8" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="联系电话：" prop="interviewPhone">
        <el-input :disabled="isDisable" v-model="defaultInpData.interviewPhone" :maxlength="15" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item label="面试形式：" prop="interviewFormat">
        <el-select :disabled="isDisable" v-model="defaultInpData.interviewFormat" placeholder="请选择面试形式">
          <el-option v-for="(item, index) in interviewTypes" :key="index" :label="item.label" :value="item.val"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="面试时间：" prop="interviewTime">
        <el-date-picker :disabled="isDisable" type="date" v-model="defaultInpData.interviewTime"   placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="interview-addr" label="面试地点：" prop="address">
        <el-input :disabled="isDisable" v-model="defaultInpData.address" placeholder="请输入面试地点"></el-input>
      </el-form-item>
      <el-form-item class="interview-desc" label="备注：">
        <el-input :disabled="isDisable" type="textarea" v-model="defaultInpData.remarks" maxlength="500"></el-input>
      </el-form-item>
      <el-form-item class="btn-box">
        <el-button class="btn send-btn" :disabled="isDisable" @click="sendInterViewInfo('defaultInpData')">发送</el-button>
        <el-button class="btn shift-btn" :disabled="isDisable"  @click="signWrite('defaultInpData')">转签</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</template>
<script>
import { formatDate } from './../../utils/dateFormat'
function fetchGetInterviewType(store, opts) {
  return store.dispatch('GET_JOB_NAME', opts)
}
function saveInterviewInfo(store, opts) {
  return store.dispatch('SAVE_INTERVIEW_INFO', opts)
}
export default {
  props: {
    isShowFillInp: {
      type: Boolean,
      default: false
    },
    defaultInpData: {
      type: Object,
      default: {}
    },
    isDisable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      parentId: 'view_Tp',
      interviewTypes: [],
      checkFrom: {
        interviewName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        interviewPhone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' }
        ],
        interviewFormat: [
          { required: true, message: '请选择面试形式', trigger: 'change' }
        ],
        interviewTime: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        address: [{ required: true, message: '请输入面试地址', trigger: 'blur' }]
      }
    }
  },
  beforeMount() {
    fetchGetInterviewType(this.$store, { parentId: this.parentId }).then(() => {
      let tempObj = this.$store.getters.getJobNames
      if (tempObj.state === '0000') {
        let tempData = tempObj.data
        let len = tempData.length
        for (let i = 0; i < len; i++) {
          this.interviewTypes.push({
            label: tempData[i].lable,
            val: tempData[i].coded,
            parentId: tempData[i].parent_coded
          })
        }
      }
    })
  },
  methods: {
    sendInterViewInfo(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.defaultInpData.interviewTime = formatDate(this.defaultInpData.interviewTime);
          //this.defaultInpData.interviewId = '10'
          saveInterviewInfo(this.$store, this.defaultInpData).then(() => {
            console.log('保存信息是否成功？')
            console.log(this.$store)
            let tempObj = this.$store.getters.getSaveInterview;
            if (tempObj.state === '0000') {
              this._showMessage('success', tempObj.message);
            } else {
              this._showMessage('error', tempObj.message);
            }
          })
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    signWrite() {},
    _showMessage(type, msg) {
      this.$message({
        showClose: true,
        message: msg,
        type: type
      })
    }
  }
}
</script>
<style lang="scss">
.form-box {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #fff;
  .el-form-item {
    margin-right: 30px;
    margin-bottom: 15px;
  }
  .el-form-item__label {
    width: 130px;
  }
  .el-form-item__content,
  .el-date-editor {
    width: 200px;
    .el-input__inner {
      height: 34px;
      line-height: 34px;
      border-radius: 0px;
    }
  }
  .interview-addr,
  .interview-desc {
    display: block;
    .el-form-item__content {
      width: 565px;
    }
  }
  .btn-box {
    margin-left: 130px;
    .btn {
      width: 70px;
      height: 36px;
      line-height: 36px;
      padding: 0px;
      border-radius: 4px;
      background-color: #fb9b3e;
      color: #fff;
      border: none;
    }
    .btn.is-disabled{
       background-color: #666 !important;
      color: #fff;
    }
    .btn.is-disabled:hover{
       background-color: #666 !important;
      color: #fff;
    }
    .btn:hover {
      background-color: #fee8c1 !important;
      color: #fb9b3e;
    }
  }
}
</style>

